<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./案例1样式.css">
</head>

<body>
    <div class="box">
        <div class="son">
            <ul>
                <!-- <li>
                    <img src="./a.PNG"><br>
                    <p>全新升级高配电脑</p>
                    <p>￥ 3000 <button class="s1">加入购物车</button></p>
                </li> -->
            </ul>
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>全选</th>
                    <th>商品</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>操作</th>
                    <th>时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="checkbox">全选按钮</td>
                    <td colspan="3"><button>删除选中商品</button></td>
                    <td>
                        <p>已选择<span>15</span>件商品</p>
                    </td>
                    <td>总价: <b>150000</b></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

</html>
<script>
    var ul = document.querySelector('ul')
    var tbody = document.querySelector('tbody')
    var data = [
        {
            src: './a.PNG',
            tag: '全新升级高配电脑',
            price: 3000,
            num: 1,
        }
        , {
            src: './b.PNG',
            tag: '电脑真皮沙发椅',
            price: 1000,
            num: 1,
        }
        , {
            src: './c.PNG',
            tag: '好运和田玉礼盒',
            price: 2000,
            num: 1,
        }
        , {
            src: './d.PNG',
            tag: '变频智能管控区',
            price: 4000,
            num: 1,
        }];

    for (var i = 0; i < data.length; i++) {
        //1、创建
        var li = document.createElement('li')
        //2、赋值
        li.innerHTML = `
                    <img src="${data[i].src}"><br>
                    <p>${data[i].tag}</p>
                    <p>￥ ${data[i].price} <button onclick="add(${i})">加入购物车</button></p>
        `;
        //3、添加
        ul.appendChild(li)
    }
    var lis = document.querySelectorAll('li')
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function (){
            for (i = 0; i < lis.length; i++) {
                lis[i].style.border = ''
            }
            this.style.border = '2px solid red'
            // this.s1.style.display='block'
        }
    }
    function set(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }
    function get() {
        var shuju = localStorage.getItem('data')
        if (shuju != null) {
            return JSON.parse(shuju)
        } else {
            return []
        }
    }
    console.log(get());

    function add(index) {
        // 1、取
        var arr = get()
        // 2、操作
        arr.push(data[index]);
        // 3、存
        set(arr);
        // 4、渲染
        xr()
    }
    function xr() {
        tbody.innerHTML = '';
        var arr = get();
        for (var i = 0; i < arr.length; i++) {
            var tr = document.createElement('tr');
            tr.innerHTML = `
            <td><input type="checkbox"></td>
            <td>
                <img src="${arr[i].src}" alt="">${arr[i].tag}
            </td>
            <td>
                <button>-</button><input type="text" value='${arr[i].num}'><button>+</button>
            </td>
            <td>￥${arr[i].price}</td>
            <td>
                <button>删除</button>
            </td>
            <td>
                3:28:30
            </td>
            `;
            // 添加
            tbody.appendChild(tr)
        }
    }
    xr();
    var span=document.querySelector('span');
    var b=document.querySelector('b');
</script>